<template>
  <div class="bg">
    <div class="menu-item" v-for="(item, index) in transformedListData" :key="index" @click="onTabClick(index)">
        {{ item.name }}
    </div>
    <div class="menu-item" @click="onBack">返回列表</div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { showTwinsPoi, hideTwinsPoi, showTwinsPanel, hideTwinsPanel, showInstancePoi, hideInstancePoi, flyToInstance, queryViewList, flyToScene } from '@/ssp'
import { MySymbol } from '@/utils/symbols';

const { proxy } = getCurrentInstance();
const showDetail = defineModel('show')
const props = defineProps({
    listData: Array,
    type: Number        // 1.孪生体  2.孪生体实例
})

// 注入的数据
const injectedData = inject(MySymbol);

const transformedListData = computed(() => {
    return props.listData.map(item => {
        if (props.type === 1) {
            // 对于 type 为 1 的情况
            return {
                ...item,
                name: item.twins_name,
            };
        } else if (props.type === 2) {
            // 对于 type 为 2 的情况
            return {
                ...item,
                name: item.twins_instance_name
            };
        } else if (props.type === 3) {
            // 对于 type 为 3 的情况
            return {
                ...item,
                name: item.view_name
            };
        } else {
            return item; // 其他情况不做处理
        }
    });
});

// proxy 替代 this
/**
* 路由对象
*/
const route = useRoute();
/**
* 路由实例
*/
const router = useRouter();
onMounted(() => {
    console.log('transformedListData====', transformedListData.value)
    console.log('injectedData=====', injectedData)
})

const onBack = ()=> {
    showDetail.value = false
}

const onTabClick = (index) => {
    const item = transformedListData.value[index]
    if (props.type === 1) {
        if (!item.select) {
            item.select = true
            showTwinsPoi(item.twins_id)
        } else {
            item.select = false
            hideTwinsPoi(item.twins_id)
        }
    } else if (props.type === 2) {
        if (!item.select) {
            item.select = true
            showInstancePoi(item.twins_instance_id)
            fsc.flyToInstance(item.twins_instance_id);
        } else {
            item.select = false
            hideInstancePoi(item.twins_instance_id)
        }
    } else {
        flyToScene(item.view_id)
    }
}

</script>
<style scoped lang='scss'>
.bg{
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    .menu-item{
        color: #fff;
        margin: 20px;
        cursor: pointer;
    }
}
</style>